import QueryModalContent from './QueryModalContent';
import './index.less';
import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';

type IQueryContentProps = {
  // setModalTitle: Function;
  queryType?: string;
  modalTitle: string;
  ref: any;
  apiData: any;
  type: ('search' | 'edit' | 'delete')[];
  isShow: boolean;
  resultKeys?: string[];
  isPrimaryKey?: boolean;
  variableOptions?: string[] | { label: string; value: string }[];
  isController?: boolean
};
const QueryContent = (props: IQueryContentProps, ref: any) => {
  const { queryType, modalTitle, type, apiData } = props;

  const searchRef = useRef<{ getQueryContentData: () => object /** singleValue: any[] */ }>(null);

  const queryData = useMemo(() => {
    if (queryType === 'edit') {
      if (apiData?.InterfaceQueryConfig?.EditConfig) {
        return apiData?.InterfaceQueryConfig?.EditConfig
      }
      return apiData?.InterfaceQueryConfig?.SelectConfig
    }
    return apiData?.InterfaceQueryConfig?.SelectConfig
  }, [queryType, apiData])

  useImperativeHandle(
    ref,
    () => ({
      getData: () => ({
        searchData: searchRef?.current?.getQueryContentData?.(),
      }),
    }),
    [],
  );

  return (
    <div className="queryContent newBox" style={{ display: props.isShow ? 'block' : 'none' }}>
      <QueryModalContent
        modalTitle={modalTitle}
        ref={searchRef}
        queryData={queryData}
        resultKeys={props.resultKeys}
        type={type}
        isPrimaryKey={props.isPrimaryKey}
        variableOptions={props.variableOptions}
        isController={props.isController}
      />
    </div>
  );
};

export default forwardRef(QueryContent);
